<template>
  <zm-view scroll>
    <view :style="[gridStyle]">
      <view v-for="(src, index) in list" :key="index" :style="[itemStyle]" @click="handleClickItem(src, index)">
        <u-image :src="src" :width="`${colWidth}px`" :height="`${colWidth}px`" mode="aspectFill" />
      </view>
    </view>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
export default {
  mixins: [page],
  data() {
    return {
      col: 3,
      colWidth: 0,
      list: []
    }
  },
  computed: {
    gridStyle() {
      return {
        gap: "1px",
        display: "grid",
        gridTemplateColumns: `repeat(${this.col}, ${this.colWidth}px)`
      }
    },
    itemStyle() {
      return {
        width: `${this.colWidth}px`,
        height: `${this.colWidth}px`
      }
    }
  },
  onLoad(options) {
    this.col = options.col
    this.list = uni.$getCache("album-list")

    this.handleInit()
  },
  methods: {
    handleInit() {
      uni.setNavigationBarTitle({
        title: "共" + this.list.length + "张照片"
      })
      const { windowWidth } = uni.getSystemInfoSync()
      this.colWidth = (windowWidth - (this.col - 1)) / this.col
    },
    // 点击
    handleClickItem(data, index) {
      uni.previewImage({
        current: index,
        urls: this.list
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
